<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>工作台</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../admin/css/other/console.css" />
</head>

<body>
	<div class="pear-container">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md8">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								快捷菜单
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home1" data-title="主页"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-home"></i>
										</div>
										<span class="shortcut-menu-label">主页</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home2" data-title="弹层"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="shortcut-menu-label">弹层</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home2" data-title="聊天"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-star"></i>
										</div>
										<span class="shortcut-menu-label">聊天</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home3" data-title="相机"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-camera"></i>
										</div>
										<span class="shortcut-menu-label">相机</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home4" data-title="表单"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-console"></i>
										</div>
										<span class="shortcut-menu-label">表单</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home5" data-title="安全"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-auz"></i>
										</div>
										<span class="shortcut-menu-label">安全</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home6" data-title="公告"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-cart"></i>
										</div>
										<span class="shortcut-menu-label">公告</span>
									</div>
									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
										<div class="shortcut-menu" data-id="home7" data-title="更多"
											data-url="http://www.baidu.com">
											<i class="layui-icon layui-icon-app"></i>
										</div>
										<span class="shortcut-menu-label">更多</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">
								代办任务
							</div>
							<div class="layui-card-body">
								<div class="layui-row layui-col-space10">
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="deputy">
											<div class="deputy-label">待审评论</div>
											<div class="deputy-count">21</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="deputy">
											<div class="deputy-label">待审帖子</div>
											<div class="deputy-count">32</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="deputy">
											<div class="deputy-label">待审文章</div>
											<div class="deputy-count">14</div>
										</div>
									</div>
									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
										<div class="deputy">
											<div class="deputy-label">待审用户</div>
											<div class="deputy-count">63</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-body">
								<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
									<div id="echarts-records-1" style="min-height:400px;"></div>
								</div>
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-body" style="padding-top: 15px; padding-bottom: 15px;">
								<table class="layui-hide" id="ID-table-demo-data"></table>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md4">
				<div class="layui-card">
					<div class="layui-card-header">留言板</div>
					<div class="layui-card-body">
						<ul class="message-board">
							<li>
								<p>要不要作为我的家人，搬来我家。</p>
								<span>12月25日 19:92</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>夏天真的来了，尽管它还有些犹豫。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
								<span>5月12日 01:25</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							</li>
							<li>
								<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
								<span>6月11日 15:33</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>一切都在不可避免的走向庸俗。</p>
								<span>2月09日 13:40</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>路上没有灯火的时候，就点亮自己的头颅。</p>
								<span>3月11日 12:30</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>

							<li>
								<p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
								<span>4月30日 22:43</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							</li>
							<li>
								<p>接近，是我对一切的态度，是我对一切态度的距离</p>
								<span>6月11日 15:33</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
							<li>
								<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
								<span>2月09日 13:40</span>
								<a href="javascript:;" data-id="1"
									class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function () {
			var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				echarts = layui.echarts,
				table = layui.table,
				carousel = layui.carousel;

			var inst = table.render({
				elem: '#ID-table-demo-data',
				cols: [[
					{ field: 'id', title: 'ID', width: 80, sort: true },
					{ field: 'username', title: '用户', width: 120 },
					{ field: 'sex', title: '性别', width: 80 },
					{ field: 'sign', title: '签名', minWidth: 160 },
					{ field: 'city', title: '城市', width: 80 },
					{ field: 'experience', title: '状态', width: 80, sort: true }
				]],
				data: [{
					"id": "10001",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}, {
					"id": "10002",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线",
				}, {
					"id": "10003",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}, {
					"id": "10004",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}, {
					"id": "10005",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}, {
					"id": "10006",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}, {
					"id": "10007",
					"username": "就眠儀式",
					"sex": "男",
					"city": "山东",
					"sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
					"experience": "在线"
				}],
				page: false
			});


			var echartsRecordsOne = echarts.init(document.getElementById('echarts-records-1'), 'walden');

			$("body").on("click", "[data-url]", function () {
				parent.layui.tab.addTabOnlyByElem("content", {
					id: $(this).attr("data-id"),
					title: $(this).attr("data-title"),
					url: $(this).attr("data-url"),
					close: true
				})
			})

			let color = [
				"#0090FF",
				"#36CE9E",
				"#FFC005",
				"#FF515A",
				"#8B5CFF",
				"#00CA69"
			];
			let echartData = [{
				name: "1",
				value1: 100,
				value2: 233
			},
			{
				name: "2",
				value1: 138,
				value2: 233
			},
			{
				name: "3",
				value1: 350,
				value2: 200
			},
			{
				name: "4",
				value1: 173,
				value2: 180
			},
			{
				name: "5",
				value1: 180,
				value2: 199
			},
			{
				name: "6",
				value1: 150,
				value2: 233
			},
			{
				name: "7",
				value1: 180,
				value2: 210
			},
			{
				name: "8",
				value1: 230,
				value2: 180
			}
			];

			let xAxisData = echartData.map(v => v.name);
			//  ["1", "2", "3", "4", "5", "6", "7", "8"]
			let yAxisData1 = echartData.map(v => v.value1);
			// [100, 138, 350, 173, 180, 150, 180, 230]
			let yAxisData2 = echartData.map(v => v.value2);
			// [233, 233, 200, 180, 199, 233, 210, 180]
			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor =
						`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
							"0x" + hex.slice(3, 5)
						)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			optionOne = {
				color: color,
				legend: {
					right: 10,
					top: 10
				},
				tooltip: {
					trigger: "axis",
					formatter: function (params) {
						let html = '';
						params.forEach(v => {
							html +=
								`<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: '#ffffff',
							shadowColor: 'rgba(225,225,225,1)',
							shadowBlur: 5
						}
					}
				},
				grid: {
					top: 100,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}月',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: xAxisData
				}],
				yAxis: [{
					type: "value",
					name: '单位：万千瓦时',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 40
					},
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					name: "2018",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[0], 0.3)
								},
								{
									offset: 1,
									color: hexToRgba(color[0], 0.1)
								}
								],
								false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData1
				}, {
					name: "2019",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[1], 0.3)
								},
								{
									offset: 1,
									color: hexToRgba(color[1], 0.1)
								}
								],
								false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData2
				}]
			};

			echartsRecordsOne.setOption(optionOne);

			setTimeout(() => {
				echartsRecordsOne.resize();
			}, 1000)

			window.onresize = function () {
				echartsRecordsOne.resize();
			}

		});
	</script>
</body>

</html>
